/** * 请求头 */
<template>
   <div>
    <el-table v-if="editType === 'single'" :data="reqHeader">
      <el-table-column label="" width="60" prop="">
        <template slot-scope="scope" slot="header">
          <el-button type="primary" circle icon="el-icon-plus" size="small" @click="add"></el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="danger" circle icon="el-icon-delete" size="small" @click="remove(scope.$index)"></el-button>
        </template>
      </el-table-column>
      <el-table-column label="请求头key值" prop="name">
        <template slot="header">
          <span>请求头key值({{ reqHeader.length }})</span>
        </template>
        <template slot-scope="scope">
          <el-input
            size="small"
            style="width: 90%"
            placeholder="请输入请求头key值"
            v-model="reqHeader[scope.$index].name"
          />
        </template>
      </el-table-column>
      <el-table-column label="请求头value值" prop="value">
        <template slot-scope="scope">
          <el-input
            size="small"
            style="width: 90%"
            placeholder="请输入请求头value值"
            v-model="reqHeader[scope.$index].value"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-tabs v-if="editType === 'batch'" v-model="tabActive"  type="border-card">
      <el-tab-pane label="冒号模式" name="colon">
        <el-input
          type="textarea"
          :rows="5"
          v-model="reqBody"
          placeholder="请使用(:)分隔; 多条记录以换行或者(,)分隔"
          @blur="getBodyList">
        </el-input>
      </el-tab-pane>
    </el-tabs>
    <el-button size="small" icon="el-icon-edit" type="text" @click="switchEdit">批量编辑/单条编辑</el-button>
    <el-button size="small" type="text" @click="deleteAll">删除全部</el-button>
  </div>
</template>
<script>
export default {
  name: "RequestHeader",
  props: {
    reqHeader: Array,
  },
  data() {
    return {
      tabActive: "colon",
      reqBody: "",
      editType: "single" // single 单条新增 batch 批量编辑
    }
  },
  computed: {
  },
  methods: {
    add() {
      this.reqHeader.push({ name: "", value: "" });
    },
    formatBody() {
      if (this.editType !== "single") {
        let header = ""
        for (let index = 0; index < this.reqHeader.length; index++) {
          const item = this.reqHeader[index]
          if (item.name.trim() !== "" || item.value.trim() !== "") {
            header += `"${item.name.trim()}": "${item.value.trim()}",\n`
          }
        }
        this.reqBody = header
      } else {
        if (typeof this.reqBody === "string" && this.reqBody.length > 0) {
          this.getBodyList()
        }
      }
    },
    getBodyList() {
      this.reqHeader.splice(0, this.reqHeader.length)
      const bodyString = this.reqBody
      const arr = bodyString.trim().split(/[\n]/g)
      const bodyList = []
      arr.forEach(item => {
        const entries = item.trim().split(/:/)
        if (entries.length >= 2 && (entries[0].trim() !== "" || entries[1].trim() !== "")) {
          bodyList.push({
            name: entries[0].trim().replace(/["',]/g, ""),
            value: entries[1].trim().replace(/["',]/g, "")
          })
        }
      })
      this.reqHeader.push(...bodyList)
    },
    switchEdit() {
      if (this.editType === 'single') {
        this.editType = 'batch'
      } else {
        this.reqHeader.splice(0, this.reqHeader.length)
        this.editType = 'single'
      }
      this.formatBody()
    },
    remove(index) {
      this.reqHeader.splice(index, 1);
    },
    deleteAll() {
      this.reqHeader.splice(0, this.reqHeader.length);
      this.reqBody = ""
    },
  },
};
</script>
<style scoped></style>
